<template>
  <div class="homeContent bg-gray">
        <div class="row-spaceb-col-center mt20">
          <div>
            <el-button size="small" type="primary" plain class="ml10" @click="sortSearch">满意度排序 <i class="el-icon-sort"></i></el-button>
          </div>
          <div class="row-start">
              <el-input size="small" clearable placeholder="请输入服务商关键字" @keyup.enter.native="searchKey" v-model="searchKeyword" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="searchKey"></el-button>
              </el-input>
              <el-button size="small" type="primary" plain class="ml10" @click="searchAll">全部</el-button>
              <el-button v-if="type" size="small" type="primary" plain class="ml10" @click="goBack">返回</el-button>
          </div>
      </div>
      <!-- v-for循环生成卡片式服务列表 -->
      <el-empty v-if="cardList.length === 0" :image-size="200"></el-empty>
      <div v-else class="row-spaceb wrap width-24">
          <div v-for="(item, index) in cardList" :key="index" class="card-shadow mt40 company-card showMouse" @click="gotoDetail(item)">
                <div class="row-start pt40 pb40 pl20 pr20">
                    <div>
                        <img :src="`/api/public/file/v1/public/get/${item.companyLogo}`" alt="" style="width:144px;height:144px" @error="setDefaultImage">
                    </div>
                    <div class="ml20">
                        <div class="comTile fs26 fwbold">{{item.companyName}}</div>
                        <div class="color-grey mt10">服务商地址：{{item.companyAddress}}</div>
                        <!-- <p>工作时间：周一至周五 8:30-17:30</p> -->
                        <div class="color-grey mt10">联系电话：{{item.companyPhone}}</div>
                        <div class="color-grey mt10">服务满意率：{{item.satisfaction || '-'}}%</div>
                        <div class="color-grey mt10">
                           <span v-for="(ele,index) in item.productStats" :key="index">{{ele.productTypeName}}（<span class="color-primary">{{ele.productCount}}项</span>）</span>
                        </div>
                    </div>
                </div>
          </div>
      </div>
      <div class="row-end mt20 mb20">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>
  </div>
</template>

<script>
import { serviceCompanyList } from '@/api/homeApi'
export default {
  name: 'productList',
  components: {

  },
  data () {
    return {
       // 生成一个卡片式数组，包含12个元素，包含服务价格/单位、服务名称、服务评分，交易次数、服务券类型，服务头图
        cardList:[
        ],
        searchKeyword:'',
        isAsc:true,
        currentPage: parseInt(sessionStorage.getItem('companyListPage')) || 1,
        pageSize: 50,
        total: 0,
        type: '',
    }
  },
  created () {
  },
  mounted () {
    //获取路由参数 type
    this.type = this.$route.query?.type
    this.getServiceCompanyList()
  },
  computed: {

  },
  methods: {
    goBack(){
      this.$router.go(-1)
    },
    sortSearch(){
      this.isAsc = !this.isAsc
      this.getServiceCompanyList()
    },
    searchAll(){
      this.currentPage = 1
      this.searchKeyword = '';
      this.search()
    },
    searchKey(){
       serviceCompanyList({isAsc:this.isAsc,pageNo:1,pageNum:this.pageSize,companyName:this.searchKeyword,supplierType:this.type}).then(res=>{
        if(res.code === 200){
          this.cardList = res.rows
          this.total = res.total
        }
      })
    },
    setDefaultImage(event) {
      event.target.src = require('@/assets/image/error.jpg');
    },
    gotoDetail(item){
      sessionStorage.setItem('companyListPage', this.currentPage)
      this.$router.push({path:'/companyDetail',query:{id:item.companyId}})
    },
    getServiceCompanyList(){
      serviceCompanyList({isAsc:this.isAsc,pageNo:this.currentPage,pageNum:this.pageSize,supplierType:this.type}).then(res=>{
        if(res.code === 200){
          this.cardList = res.rows
          this.total = res.total
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getServiceCompanyList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getServiceCompanyList()
    },
  }

}
</script>

<style scoped>
.homeContent{
    width: 100%;
    min-height:80vh;
    margin: 0 auto;
    padding: 20px 15%;
}

.company-card{
  width: calc(50% - 20px);
  box-sizing: border-box;
  background-image: url('@/assets/image/companyBg.png');
  background-size: 100% 100%;
  margin-right: 40px;
}
.company-card:nth-child(2n) {
  margin-right: 0px;
}

.border{
    border: 1px solid #ccc;
}
.button1{
    background-color: rgb(252,241,231);
    color: #D32521;
    border: 1px solid #D32521;
}
</style>
